<template>
  <div class="Login">

    <div class="form-tt">
      <span class="active">手机号快捷登录</span> | <span v-on:click="gotoLogin2">账号密码登录</span>
    </div>
    <div class="login-from">
      <div class="list">
        <input type="tel" class="txt" v-model="phone" placeholder="请输入您手机号" />
      </div>
      <div class="list clearfix">
        <div class="fl">
          <input type="text" class="txt" v-model="yzm" placeholder="请输入验证码" />
        </div>
        <div class="fr">
          <mt-button type="danger" size="large" v-on:click="sendcodeFn" :disabled="disabled">{{vsecond}}</mt-button>
        </div>
      </div>
      <div class="tip">未注册过的手机号将自动创建为女神帐号</div>
    </div>
    <div class="error-msg">{{errorMsg}}</div>
    <div class="next-btn">
      <mt-button type="danger" size="large" v-on:click="loginFn">登录</mt-button>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
export default {
  name: 'Login',
  data () {
    return {
      msg: 'login',
      phone:'',
      yzm:'',
      errorMsg:'',
      disabled: false,
      second:60,
      vsecond:'获取验证码',
    }
  },
  methods:{
    send: function () {

      this.disabled = true;
      var vm = this;
      vm.second = 60;
      var timer = null;
      vm.vsecond = vm.second + '秒后重新发送'
      timer = setInterval(function(){
        if(vm.second<=0){
          vm.vsecond = '获取验证码';
          vm.disabled = false;
          clearInterval(timer);
          return;
        }
        vm.second = vm.second - 1;
        vm.vsecond = vm.second + '秒后重新发送'

      },1000)

    },
    gotoLogin2(){
      this.$router.push({path:'/login2',query: {redirect: this.$route.query.redirect}});
    },
    sendcodeFn:function(){

      if(this.phone == ''){
        this.errorMsg = '手机号不能为空';
        return;
      }

      if(!utilities.isMobile(this.phone)) {
        this.errorMsg = '请输入正确的手机号'
        return;
      }
      else{
        this.errorMsg = '';
      }

      var sendcodeData = {};
      sendcodeData.phone = this.phone;
      var _this = this;
      $.ajax({
        type:'post',
        url: RouteMap.sendcode,
        data: sendcodeData,
        success:function(res){
          if(res.code == 200){
            //Toast(res.msg);
            _this.send();
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
  	loginFn:function(){

      if(this.phone == ''){
        this.errorMsg = '手机号不能为空';
        return;
      }

      if(this.yzm == ''){
        this.errorMsg = '验证码不能为空';
        return;
      }


      if(!utilities.isMobile(this.phone)) {
        this.errorMsg = '请输入正确的手机号'
        return;
      }
      else{
        this.errorMsg = '';
      }

      if(!utilities.isSmsCodeValid(this.yzm)){

        this.errorMsg ='短信验证码有误';
        return;
      }
      else{
        this.errorMsg ='';
      }

      this.errorMsg = '';


      var ajaxData = {};
      ajaxData.phone = this.phone;
      ajaxData.verify = this.yzm;
      ajaxData.openid = localStorage.openid || '';
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.smslogin,
        data: ajaxData,
        success:function(res){
          if(res.code == 200){

            var userData = res.data;
            userData.login = "1";
            userData.phone = _this.phone;

            localStorage.setItem('user',JSON.stringify(userData));
            sessionStorage.setItem('user',JSON.stringify(userData));

            if(_this.$route.query.redirect != '' && _this.$route.query.redirect != undefined){
              _this.$router.push({path:''+_this.$route.query.redirect});
            }
            else{
              _this.$router.push({path:'/'});
            }

          }
          else{
            Toast(res.msg)
          }
        }
      })
  	}

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .form-tt{
    font-size: .6rem;
    color: #b2b2b2;
    text-align: center;
    padding: 1.4rem 0 1.2rem;
  }
  .form-tt span{
    padding: 0 1rem;
  }
  .form-tt .active{
    color: #36231d;
  }
  .form-tt a{
    color: #b3b3b3;
  }
  .list{
    padding:0 1.2rem;
    margin-bottom: .7rem;
  }
  .txt{
    background: #f2f2f2;
    border-radius: 1rem;
    padding: .2rem .8rem;
    width: 12rem;

    font-size: .5rem;
  }
  .fl .txt{
    width: 5rem;
  }
  .btn{
    background: red;
    width: 4rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 1rem;
  }

  .mint-button--danger{
    border-radius: 1rem;
    padding: 0 .8rem;
  }
  .tip{
    text-align: center;
    font-size: .5rem;
    color: #808080;
  }
  .next-btn{
    padding: 0 1rem;
  }
  .from-box{ padding: .67rem; padding-top: 3.33rem; }
  .btn-box{ padding-top: 1rem; }

</style>
